<template>
  <div class="employees-container">
    
    <el-card>
      <div class="app-container">
        <page-tools>
          <!-- 插入到left插槽位置 -->
          <template #left>
            <i class="el-icon-info" />
            <!-- <span>本月: 社保在缴 公积金在缴</span> -->
            <span>总记录数: {{total}} 条</span>
          </template>
          <!-- 插入到right插槽位置 -->
          <template #right>
            <!-- 员工导入流程 
              excel - 插件解析 - js数据 -  调用接口 -  加入数据库
              导出流程：
              客户端 - 调用接口 - 后端服务 - 返回JSON - 客户端 - 插件解析到JOSN到excel - 浏览器下载
            -->
            <el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
            <el-button type="primary" size="small" @click="exportExcel">导出excel</el-button>
            <el-button type="primary" size="small" @click="addEmployees">新增员工</el-button>
          </template>
        </page-tools>
        <el-card>
          <el-table border :data="list">
            <el-table-column
              label="序号"
              type="index"
              width="60">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="username"
              width="180">
            </el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
              width="180">
            </el-table-column>
            <el-table-column
              label="工号"
              prop="workNumber"
              width="180">
            </el-table-column>
            <!-- 
            prop 指定对应要渲 染的字段就可以野鸳鸯输出 如果要做二次转换 prop就不行
            如果二次转换 借助插槽拿到原址数据 做处理之后 在输出
          -->
            <el-table-column label="聘用形势" width="180">
              <!-- 插值表达式 可以支持方法调用不 可以  如果写一个函数调用 渲染的是啥？ 函数返回值
            思路：编写一个格式化的函数 在函数里面进行有效格式化 最后把合适化之后的数据 return -->
              <template #default="{ row }">
                {{ formatEmployee(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column
              label="部门"
              prop="departmentName"
              width="180"
            ></el-table-column>
            <el-table-column label="入职时间" prop="timeOfEntry" width="200">
              <template #default="{ row }">
                {{ formatTime(row.timeOfEntry) }}
              </template>
            </el-table-column>
            <el-table-column label="是否在职" width="150">
              <template #default="{ row }">
                {{ row.inServiceStatus === 1 ? "在职" : "离职" }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150">
              <template #default="{ row }">
                {{ row.enableState === 1 ? "可用" : "不可用" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300">
              <template #default='{row}'>
                <el-button type="text" @click="details(row.id)">查看</el-button>
                <el-button type="text">转正</el-button>
                <el-button type="text">调岗</el-button>
                <el-button type="text">离职</el-button>
                <el-button type="text" @click="role(row.id)">分配角色</el-button>
                <el-button type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件  
            size-change处理页码大小
            current-change当前页变动时候触发的事件
            page-size 每页显示条数
          -->
          <div>
            <el-pagination
              @current-change="currentChange"
              :page-size="params.size"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div> 
        </el-card>
      </div>
    </el-card>
    <!-- 弹框 -->
    <!-- 
      新增组件 以子组件为主导限定了什么prop 抛出什么事件你就接受什么事件
      elementUi 所有组件都是这样的 它明确告诉你 你传递神魔prop 接收什么事件
    -->
    <add-employees 
    :show-dialog="dialogVisible"
    :update-list="getList"
    @close-dialog="closeDialog"/>
    <!-- 分配角色 -->
    <assign-role
    :dialog-visible="roleVisible" 
    @close-role="closeRole"
    :cur-id="curId"
    @open-role="role"
    />
  </div>
</template>
<script>
import { getEmployeeList } from "@/api/employees";
import AddEmployees from "@/views/Employee/components/add-employees.vue";
import {getExportData} from '@/utils/excel'
import AssignRole from '@/views/Employee/components/assign-role.vue'
import dayjs from "dayjs";
export default {
  components: {
    AddEmployees,
    AssignRole
  },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        size: 5,
      },
      total: 0,
      dialogVisible: false,
      roleVisible: false,
      curId: ''//选中员工的id
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await getEmployeeList(this.params);
      // console.log(res);
      this.list = res.rows;
      this.total = res.total;
    },
    // 格式化聘用形式函数
    formatEmployee(value) {
      const TYPE = {
        1: "正式",
        2: "非正式",
      };
      return TYPE[value];
    },
    formatTime(value) {
      return dayjs(value).format("YYYY-MM-DD");
    },
    currentChange(page) {
      // console.log(page);
      this.params.page = page;
      this.getList();
    },
    addEmployees() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    // 导出
    exportExcel() {
      // 按需导入 神魔时候要用导出的功能 神魔时候就动态的把这个包加入到项目中
      // 先不用接口数据，使用静 态数据做一个基础的导出功能
      import('@/vendor/Export2Excel').then(async (excel) => {
        console.log(excel);
        // export_json_to_excel: 把josn格式转化为excel[我们采取的格式]
        // export_table_to_excel:把表格格式转化为excel
        const res = await getEmployeeList(this.params)
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const {data} = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
        // 把基础功能实现的情况下 把静态写死的数据换成 接口数据
        // 1.调用接口数据 和获取表格数据的写法时一样的
        // 2.数据的二次处理 后端返回的数据不能直接用
          // header: ['姓名', '工资'], // 表头 必填
          header: Object.keys(headerRelation),//表头header 必填 要求时一个数组
          // data: [
          //   ['刘备', 100],
          //   ['关羽', 500]
          // ], // 具体数据 必填
          data: data,//表格数据 body要求为二位数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
        /* 
        以上代码表示
          1. 当我们正式点击`导出`按钮之后，才去加载vendor文件夹中的Export2Excel模块
          2. import方法执行完毕返回的是一个promise对象，在then方法中我们可以拿到使用的模块对象
          3. 重点关注data的配置部分，我们发现它需要一个严格的二维数组  |
        */
      })
    },
    // 查看
    details(id) {
      // 跳转到详情页 pqth+query 携带参数id
      this.$router.push({
        path:'/employeeDetail',
        query: {
          id
        }
      })
    },
    // 角色
    role(id) {
      this.roleVisible = true
      this.curId = id
    },
    closeRole() {
      this.roleVisible = false
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
/* 
3- 为什么使用import语法？
导出功能是一个不一定会用到的功能，而且依赖的插件包体积比较大，为了减少包体积大小，应该采用动态导入的语法，
也就是按需导入，这里的import语法代表只有点击导出按钮时才会动态引入相关js文件
 */